<template>
	<view class="lay">
		<uni-nav-bar 
		left-icon="left"
		title="好友验证"
		:border="false"
		>
			<view class="send-bt" slot="right">
				<u-button @click="addFriend()" :disabled="isFlag" text="发送" type="primary"></u-button>
				<!-- <button :disabled="false ">发送</button> -->
			</view>
		</uni-nav-bar>

		<view class="content-label">
			<text>发送添加好友申请</text>
		</view>
		<view class="remarks-content">
			<textarea 
			v-model="friends.remarks" 
			:focus="true" 
			:auto-height="true"
			placeholder="填写验证信息"
			maxlength="30"
			@input="isDisabled(friends.remarks)"
			></textarea>
		</view>
		<view class="nick-name-label">
			<text>备注名</text>
		</view>
		<view class="name">
			  <u--input
			    :placeholder="userName"
			    border="none"
			    v-model="friends.fName"
			    clearable
			  ></u--input>
		</view>
		<view class="permitted">
			<text>允许对方查看我的手机号</text>
			<u-switch v-model="isPermitted" size="20" ></u-switch>
		</view>
		<view class="permissions">
			<text>对外名片权限设置</text>
		</view>
		<view class="auto-send-card">
			<text>添加好友后自动发送我的名片</text>
			<u-switch v-model="isAutoSend" size="20" ></u-switch>
		</view>
		<view class="tips">
			<text>为了让好友更好的了解，快去完善你的对外名片吧,</text>
			完善名片
		</view>
		<view class="select-card">
			<text>添加好友后自动发送我的名片</text>
			<u-switch v-model="isSelect" size="20" ></u-switch>
		</view>
		<u-toast ref="uToast"></u-toast>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				successToast:{
					type:'default',
					title:'默认主题',
					message:'好友请求已发送',
				},
				isFlag:true,
				// 好友关系信息
				isPermitted:false,
				isAutoSend:false,
				isSelect:false,
				userName:'请输入名字',
				friends:{
					id:null,
					uid:0,
					fid:0,
					remarks:'',
					fName:'',
					remakesid:0,
				},
			}
		},
		onLoad() {
			this.user = uni.getStorageSync('user')
			this.friends.uid = this.user.id
			this.remakesid = this.user.id
			let friend = uni.getStorageSync('friend')
			this.friends.fid = friend.id
			this.userName = friend.userName
		},
		methods: {
			showToast(params) {
				this.$refs.uToast.show({
					...params,
					complete(){
						uni.navigateBack({
							delta: 1
						})
					}
				})
			},
			isDisabled(e){
				if(e.length > 0){
					this.isFlag = false;
				}else{
					this.isFlag = true;
				}
			},
			addFriend(){
				let _this = this
				console.log(_this.friends);
				uni.request({
					url:"http://localhost:8090/nailCampus/friend/addFriend",
					method:'POST',
					data:_this.friends,
					success(res) {
						// 成功返回刚才页面
						if(res.data.code === 200){
							_this.showToast(_this.successToast);
						}
					}
				})
			},
		}
	}
</script>

<style lang="less" scoped>
.lay{
	height: 100%;
	background-color: #F2F2F4;
	padding-bottom: 19.9%;
	.send-bt{
		::v-deep.u-button{
			height: 50rpx;
		}

	}
	.content-label{
		margin-top: 3%;
		padding-bottom: 3%;
		text{
			font-size: 28rpx;
			margin-left: 3%;
			color:#a6a6a7;
			
		}
	}

	.remarks-content{
		padding-top: 4%;
		padding-left: 3%;
		padding-right: 3%;
		height: 140rpx;
		background-color: white;
	}
	.nick-name-label{
		margin-top: 4%;
		padding-bottom: 3%;
		text{
			font-size: 28rpx;
			margin-left: 3%;
			color:#a6a6a7;
			
		}
	}
	.name{
		padding-top: 3%;
		background-color: white;
		padding-left: 3%;
		padding-bottom: 3%;
	}
	.permitted{
		margin-top: 5%;
		display: flex;
		padding-top: 3%;
		padding-bottom: 3%;
		background-color: white;
		text{
			padding-right: 37%;
			margin-left: 3%;
		}
	}
	.permissions{
		margin-top: 4%;
		padding-bottom: 3%;
		text{
			font-size: 28rpx;
			margin-left: 3%;
			color:#a6a6a7;
			
		}
	}
	.auto-send-card{
		display: flex;
		padding-top: 3%;
		padding-bottom: 3%;
		background-color: white;
		text{
			padding-right: 28%;
			margin-left: 3%;
		}
	}
	.tips{
		margin-top: 2%;
		margin-left:3% ;
		padding-bottom: 3%;
		color: #0080ff;
		text{
			padding-right: 5%;
			font-size: 28rpx;
			letter-spacing: 2rpx;
			color:#a6a6a7;
		}
	}
	.select-card{
		display: flex;
		padding-top: 3%;
		padding-bottom: 3%;
		background-color: white;
		text{
			padding-right: 28%;
			margin-left: 3%;
		}
	}
}
</style>
